<!-- 队伍管理页面 -->

<div class="container" :important="org">

	<script>
		function groupType(value, row, index) {

		    if(row.groupType == 'branch_group'){
		        return '支队'
			} else if (row.groupType == 'total_group'){
		        return '总队'
			}
        }
	</script>
	<style>
		.handler{height: auto}
	</style>
	<div>

		<!-- 队伍操作 -->

		<!--  handler area -->
		<div class="row handler">

			<span><i style="font-size: 15px" class="iconfont">&#xe601;</i>功能模块</span>
			<hr>


			<div class="btnBlock" type="f">
				<p>队伍查询</p>
				<div class="triangle" type="display"></div>
			</div>

			<div class="btnBlock" type="s" id="addTeamBtn" data-toggle="modal" data-target="#addTeamModal">
				<div>
					<i class="iconfont">&#xe617;</i><span style="vertical-align: super;">新增队伍</span>
				</div>
			</div>

			<div class="btnBlock" type="t" id="modTeamBtn" :click="@modTeamModal">
				<div>
					<i class="iconfont">&#xe634;</i>
					<span style="vertical-align: super;">修改队伍</span>
				</div>
			</div>


			<div class="btnBlock" type="l" id="delTeamBtn" :click="@delTeamModal">
				<div>
					<i class="iconfont">&#xe606;</i>
					<span style="vertical-align: super;">删除队伍</span>
				</div>
			</div>

			<!-- 查询操作 -->
			<div class="btnarea">
				<form role="form" class="form-horizontal" data-parsley-validate="" novalidate="">

					<div class="form-group">
						<!--队伍名称-->
						<label for="officeName" class="col-sm-1 control-label">队伍名称</label>
						<div class="col-sm-2">
							<input type="text" :duplex="@team.name" class="form-control" id="teamName">
						</div>

						<!--队伍地址-->
						<label for="officeName" class="col-sm-1 control-label">队伍地址</label>
						<div class="col-sm-2">
							<input type="text" :duplex="@team.addr" class="form-control" id="teamAddr">
						</div>

						<button type="button" class="btn btn-sm btn-primary btn-right" id="queryTeam" :click="@queryTeam">查询</button>
					</div>

				</form>
			</div>

			<span><i style="font-size: 15px" class="iconfont">&#xe6d6;</i>列表展示</span>
			<hr>
		</div>

		<!-- data -->
		<div class="row data">
			<div>
				<table id="teamTable"
					   data-detail-formatter="detailFormatter"
					   data-minimum-count-columns="2"
					   data-pagination="true"
					   data-id-field="id"
					   data-page-list="[10, 25, 50, 100, ALL]"
					   data-show-footer="false"
					   data-side-pagination="client"
					   data-click-to-select="true"
					   data-cache="false"
					   data-page-number="1" data-page-size="5">
					<thead>
					<tr>
						<th data-field="state" data-radio="true"></th>
						<th data-field="groupName" data-sortable="true" >队伍名称</th>
						<th data-field="groupAddress" data-sortable="true" width="200">队伍地址</th>
						<th data-field="groupPhone" data-sortable="true">队伍电话</th>
						<th data-field="groupDES" data-sortable="true">队伍描述</th>
						<th data-field="groupType" data-formatter="groupType">队伍类型</th>
					</tr>
					</thead>
				</table>
			</div>
		</div>

		<!-- 新增队伍 -->
		<div class="modal fade" id="addTeamModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h5 class="modal-title" id="addTeamTitle"><i style="font-size: 15px;margin: 0 10px;" class="iconfont">&#xe64c;</i>新增队伍</h5>
					</div>
					<div class="modal-body">
						<div>
							<div class="row form-group">
								<label class="col-sm-2 col-sm-offset-1" :rules="{required=true}">队伍名称:</label>
								<input type="text" class="col-sm-8" id="add-team-name" :duplex="@team.newName">
								<span class="col-sm-1 tip">*</span>
							</div>
							<div class="row form-group">
								<label class="col-sm-2 col-sm-offset-1">队伍地址:</label>
								<input type="text" class="col-sm-8" id="add-team-addr" :duplex="@team.newAddr">
								<span class="col-sm-1 tip">*</span>
							</div>
							<div class="row form-group">
								<label class="col-sm-2 col-sm-offset-1">队伍描述:</label>
								<textarea type="text" style="resize: none;height: 100px;min-height: 100px" class="col-sm-8" id="add-team-note" :duplex="@team.newNote"></textarea>
								<span class="col-sm-1 tip">*</span>
							</div>
							<div class="row form-group">
								<label class="col-sm-2 col-sm-offset-1">队伍电话:</label>
								<input type="text" class="col-sm-8" id="add-team-phone" :duplex="@team.newPhone">
								<span class="col-sm-1 tip">*</span>
							</div>
						</div>
					</div>


					<div class="modal-footer">
						<button class="btn btn-primary" :click="@addTeam" type="submit">提交</button>
					</div>
				</div>
			</div>
		</div>



		<!-- 修改队伍 -->
		<div class="modal fade" id="modTeamModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h5 class="modal-title" id="modTeamTitle"><i style="font-size: 15px;margin: 0 10px;" class="iconfont">&#xe64c;</i>修改队伍</h5>
					</div>
					<div class="modal-body">
						<div>
							<div class="row form-group">
								<label class="col-sm-2 col-sm-offset-1" :rules="{required=true}">队伍名称:</label>
								<input type="text" class="col-sm-8" id="mod-team-name" :duplex="@team.modName">
								<span class="col-sm-1 tip">*</span>
							</div>
							<div class="row form-group">
								<label class="col-sm-2 col-sm-offset-1">队伍地址:</label>
								<input type="text" class="col-sm-8" id="mod-team-addr" :duplex="@team.modAddr">
								<span class="col-sm-1 tip">*</span>
							</div>
							<div class="row form-group">
								<label class="col-sm-2 col-sm-offset-1">队伍描述:</label>
								<textarea type="text" style="resize: none;height: 100px;min-height: 100px" class="col-sm-8" id="mod-team-note" :duplex="@team.modNote"></textarea>
								<span class="col-sm-1 tip">*</span>
							</div>
							<div class="row form-group">
								<label class="col-sm-2 col-sm-offset-1">队伍电话:</label>
								<input type="text" class="col-sm-8" id="mod-team-phone" :duplex="@team.modPhone">
								<span class="col-sm-1 tip">*</span>
							</div>

						</div>
					</div>
					<div class="modal-footer">
						<button class="btn btn-primary" :click="@modTeam" type="submit">提交</button>
					</div>
				</div>
			</div>
		</div>


		<!-- 删除队伍confirm -->
		<div class="modal fade" id="delTeamModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						<h5 class="modal-title"><i style="font-size: 15px;margin: 0 10px;" class="iconfont">&#xe64c;</i>确定删除队伍？</h5>
					</div>
					<div class="modal-body">
						<p>注意：</p>
						<p style="color: red">该操作会删除支队下科室信息，支队下科室账号，支队用户账号，支队账号</p>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button class="btn btn-primary" :click="@delTeam">确定删除</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>